<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)

const s1=ref('false')

const s2=ref(1)
const s3=ref('1')
</script>

<template>
<h1>EL-开关组件</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #ce8313; --el-switch-off-color: #4961ff"
  />
  <hr>
  是否显示图片<el-switch v-model="s1" style="--el-switch-on-color:green;--el-switch-off-color: red;"/>
  <hr>
  <img src="mr.png" alt="" v-if="s1">
  <hr>
  是否显示图片<el-switch v-model="s2":active-value="1":inactive-value="0"/>
  是否显示图片<el-switch v-model="s3":active-value="'1'":inactive-value="'0'"/>
</template>

<style scoped>

</style>